<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { teamStatusMapping } from "../util/relationshipMapping.js";
import { createTeam } from "../services/team.js";
const router = useRouter();
const param = reactive({
    description: "",
    expireTime: null,
    maxNum: null,
    name: "",
    password: "",
    status: null,
});
const showPicker = ref(false);
const minDate = new Date();
const onSubmit = async() => {
    // 提交请求，创建队伍
    const code = await createTeam(param);
    if (code == 1) {
        router.replace({
            path: "/inter/user/myCreateTeam",
        });
    }
};
const onConfirm = (value) => {
    param.expireTime = value;
    showPicker.value = false;
};
</script>
<template>
    <van-form @submit="onSubmit">
        <!-- 表单组件 -->
        <van-cell-group inset>
            <van-field
                v-model="param.name"
                name="队伍名"
                label="队伍名"
                placeholder="队伍名"
                :rules="[{ required: true, message: '请填写队伍名' }]"
            />
            <!-- 文本域 -->
            <van-field
                v-model="param.description"
                rows="4"
                autosize
                label="队伍描述"
                type="textarea"
                maxlength="512"
                placeholder="请输入留言"
                show-word-limit
            />
            <!-- 时间选择器 -->
            <van-field
                v-model="param.expireTime"
                is-link
                readonly
                name="datetimePicker"
                label="过期时间"
                placeholder="点击选择过期时间"
                @click="showPicker = true"
            />
            <van-popup v-model:show="showPicker" position="bottom">
                <van-datetime-picker
                    v-model="param.expireTime"
                    type="date"
                    title="选择过期时间"
                    :min-date="minDate"
                    @confirm="onConfirm"
                    @cancel="showPicker = false"
                />
            </van-popup>
            <!-- 步进器 -->
            <van-field name="stepper" label="最大人数">
                <template #input>
                    <van-stepper v-model="param.maxNum" min="2" max="20" />
                </template>
            </van-field>
            <!-- 单选框 -->
            <van-field name="radio" label="队伍状态">
                <template #input>
                    <van-radio-group
                        v-model="param.status"
                        direction="horizontal"
                    >
                        <van-radio :name="0">{{
                            teamStatusMapping[0]
                        }}</van-radio>
                        <van-radio :name="1">{{
                            teamStatusMapping[1]
                        }}</van-radio>
                        <van-radio :name="2">{{
                            teamStatusMapping[2]
                        }}</van-radio>
                    </van-radio-group>
                </template>
            </van-field>
            <!-- 密码 -->
            <van-field
                v-if="param.status == 2"
                v-model="param.password"
                type="password"
                name="密码"
                label="密码"
                placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]"
            />
        </van-cell-group>
        <!-- 提交 -->
        <div style="margin: 16px">
            <van-button round block type="primary" native-type="submit">
                提交
            </van-button>
        </div>
    </van-form>
</template>
<style scoped lang="scss"></style>
